<template>
  <div>
    <div class="red-banner">
      <div>
        <ul>
          <img :src="imgUrl" class="icon" />
          <router-link
            v-for="(item, index) in info"
            :key="index"
            :to="`${item.paths}`"
            class="luyou"
            active-class="active"
          >
            <em>{{ item.name }}</em>
          </router-link>
        </ul>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      imgUrl: require("../assets/sanjiaoxing_shang.png"),
      info: [
        { name: "推荐", paths: "/home/tuijian" },
        { name: "排行榜", paths: "/home/phb" },
        { name: "歌单", paths: "/home/gedan" },
        { name: "主播电台", paths: "/home/zhubo" },
        { name: "歌手", paths: "/home/geshou" },
        { name: "新碟上架", paths: "/home/xingdie" },
      ],
    };
  },
  watch: {
    $route() {
      console.log(1);
      console.log(this.$refs.acti);
    },
  },
};
</script>

<style scoped>
.icon {
  position: absolute;
  position: absolute;
  top: -14px;
  left: 32px;
  width: 25px;
}
.red-banner {
  height: 40px;
  background-color: #c20c0c;
  border-bottom: 0px solid #a40011;
}
ul {
  position: absolute;
  top: 70px;
  left: 332px;
}
ul a {
  cursor: pointer;
  float: left;
  font-size: 12px;
  margin: 0 17px;
  display: block;
  height: 40px;

  color: #fff;
}
ul .luyou {
  width: 57px;
  height: 20px;

  line-height: 20px;
  text-align: center;
  border-radius: 27px;
  margin-top: 8px;
}
ul .luyou:hover {
  background-color: #9b0909;
}
.active {
  background-color: #9b0909;
}
ul .luyou em {
  font-style: normal;
}
</style>
